<template>
  <div
    class="danqwei"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="item">
      <i class="iconfont icon-danwei"></i>
      <div class="title">监管单位</div>
      <div class="shu">{{danweiData.unitTotal}}户</div>
    </div>

    <div class="item">
      <i class="iconfont icon-shiping-xue"></i>
      <div class="title">监督覆盖率</div>
      <div class="shu">{{(danweiData.rateCoverage*100).toFixed(2)}}%</div>
    </div>

    <div class="item">
      <i class="iconfont icon-chakan"></i>
      <div class="title">监督户次数</div>
      <div class="shu">{{danweiData.frequencyTotal}}户</div>
    </div>

    <div class="item">
      <i class="iconfont icon-guanliyuan"></i>
      <div class="title">人均监督户次数</div>
      <div class="shu">{{(danweiData.perCapitaTotal*1).toFixed(2)}}人/次</div>
    </div>
  </div>
</template>

<script>
import Bus from "../../plugs/bus";
import { getJianGuanDanWei } from "../../api/gaikuang";

export default {
  name: "DanWei",
  data() {
    return {
      loading: true,
      areaCity: { name: "市辖区", code: "131000" },
      isQuxian: false,
      danweiData: {
        frequencyTotal: 0,
        rateCoverage: "1",
        unitTotal: 0,
        perCapitaTotal: "100"
      }
    };
  },
  methods: {
    async getDanwei() {
      this.loading = true;
      let y = new Date().getFullYear();
      // try {
      var json = (
        await getJianGuanDanWei({
          year: this.$store.state.YEAR,
          areaCode: this.areaCity.code
        })
      ).data.data;
      // } catch (error) {
      //   var json = {
      //     frequencyTotal: 0,
      //     rateCoverage: "1",
      //     unitTotal: 0,
      //     perCapitaTotal: "100"
      //   };
      // }
      this.loading = true;
      this.loading = false;
      this.danweiData = json;
    }
  },
  created() {
    this.getDanwei();
    Bus.$on("isQuxian", e => {
      this.isQuxian = e;
    });
    Bus.$on("AreaItem", e => {
      this.areaCity = e;
      this.getDanwei();
    });
  }
};
</script>

<style scoped lang="less">
.danqwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;

  .item {
    display: grid;
    border: 0.0625rem solid #2c4daa;
    padding: 0.625rem;

    .iconfont {
      grid-column: 1;
      grid-row: 1 / span 2;
      font-size: 2.25rem;
      text-align: center;
      color: #07ccff;
    }

    .title {
      grid-column: 2;
      grid-row: 1;
      font-size: 0.75rem;
    }

    .shu {
      grid-column: 2;
      grid-row: 2;
      font-size: 1rem;
      color: #07ccff;
    }
  }
}
</style>